<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图练习-拼写名字</title>
    <style>
        .yuyong {
            width: 666px;
            height: 111px;
            margin: 0 auto;
        }

        .gongyue {
            width: 777px;
            height: 111px;
            margin-top: 10px;
            margin: 0 auto;
        }

        .y,
        .y1,
        .y2 {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -366px -558px;
        }

        .u,
        .u1 {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -476px -419px;
        }

        .o,
        .o1 {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -370px -278px;
        }

        .n,
        .n1 {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -254px -276px;
        }

        .g,
        .g1,
        .g2 {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -95px -139px;
        }

        .e {
            width: 111px;
            height: 111px;
            background: url(../CSS学习/精灵图/abc.jpg) no-repeat -478px -6px;

        }

        .y,
        .u,
        .y1,
        .o,
        .n,
        .g {
            float: left;
        }

        .g1,
        .o1,
        .n1,
        .g2,
        .y2,
        .u1,
        .e {
            float: left;
        }
    </style>
</head>

<body>
    <div class="yuyong">
        <div class="y"></div>
        <div class="u"></div>
        <div class="y1"></div>
        <div class="o"></div>
        <div class="n"></div>
        <div class="g"></div>
    </div>
    <div class="gongyue">
        <div class="g1"></div>
        <div class="o1"></div>
        <div class="n1"></div>
        <div class="g2"></div>
        <div class="y2"></div>
        <div class="u1"></div>
        <div class="e"></div>
    </div>
</body>

</html>